<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<style type="text/css">
#wiz_customer .ui-jqgrid .ui-jqgrid-hdiv {
	display: none
}

#wiz_customer .ui-jqgrid {
	margin: 10px 0 0 10px
}

#wiz_customer .ui-jqgrid-bdiv,#wiz_customer .ui-jqgrid .ui-widget-content,#wiz_customer .ui-state-hover {
	border: none !important; font-size: 13px; line-height: 22px;
}

#wiz_customer .ui-jqgrid tr.jqgrow td {
	border-right: none !important; border-bottom: 1px dashed #bbb !important; padding: 7px 5px !important
}

#wiz_customer .ui-jqgrid .gridAltclass {
	background-color: #f0f0f0
}

#alertSelectedService .close {
	display: none
}
</style>

<div id="createWizard" class="wizard box no-border"
	style="overflow: hidden">
	<div class=" header">
		<ul class="steps">
			<li class="current"><a href="#wiz_customer">1、识别用户信息</a>
			</li>
			<li><a href="#wiz_create">2、确认是否服务范围并登记事件信息</a>
			</li>
			<li><a href="#wiz_similarIncident">3、判断是否重复事件</a>
			</li>
			<li><a href="#wiz_support">4、远程支持与解决</a>
			</li>
		</ul>
	</div>


	<div id="cusUserInfo" class="details" style="display:none;float:none">
		<div class="header">
			<h3>用户信息</h3>
		</div>
		<section>
			<table class="form-table">
				<tr>
					<td class="td1">姓名：</td>
					<td class="td2"><label id="lbCusUserId" class="hidden"></label><label
						id="lbCusUserName"></label></td>
					<td class="td1">电话：</td>
					<td class="td2"><label id="lbCusUserTel"></label></td>
				</tr>
				<tr>
					<td class="td1">客户类别：</td>
					<td class="td2"><label id="lbCusUserType"></label></td>
					<td class="td1">邮件：</td>
					<td class="td2" ><label id="lbCusUserEmail"></label>
					</td>
				</tr>
				<tr>
					<td class="td1">单位名称：</td>
					<td class="td2"><input id="hidCusUserCustomerId" type="hidden">
						<label id="lbCusUserCustomer"></label></td>
					<td class="td1">所在部门：</td>
					<td class="td2"><label id="lbCusUserDepartment"></label></td>
				</tr>
				<tr>
					<td class="td1">联系地址：</td>
					<td class="td2" ><label id="lbCusUserLinkaddress"></label>
					</td>
					
				</tr>
			</table>
		</section>
	</div>

	<div id="incidentInfo" class="details" style="display:none;float:none">
		<div class="header">
			<h3>事件信息</h3>
		</div>
		<table class="form-table">
			<tr>
				<td class="td1">关联项目：</td>
				<td class="td2" colspan="3"><label id="icdIncidentProject"></label>
				</td>
			</tr>
			<tr>
				<td class="td1">事件标题：</td>
				<td class="td2" colspan="3"><label id="icdIncidentTitle"></label>
				</td>
			</tr>
			<tr>
				<td class="td1">事件描述：</td>
				<td class="td2" colspan="3" id="icdIncidentDescription"></td>
			</tr>
			<tr>
				<td class="td1">关联资产：</td>
				<td class="td2"><label id="icdIncidentAssets"></label></td>
				<td class="td1">关联服务：</td>
				<td class="td2"><label id="icdIncidentServiceCatalog"></label>
				</td>
			</tr>
		</table>
	</div>


	<div style="padding:0" class="content tabbed">
		<div id="wiz_customer">

			<div class="box no-border">
				<div class="searchbox no-border"
					style="background:#fff;padding:10px 0 10px 31px;height: 55px">
					<input style="width:300px" type="text" id="searchUserKeyword"
						placeholder="输入用户姓名、电话、单位名称、服务合同"> <input type="submit"
						class="submit" onclick="searchUserKeyword_submit();"
						style="left:330px;top:10px" value="查询"> <a
						class="nui-txt-link" style="margin-left:65px;"
						onclick="openCreateCusUser();"> <span class="icon icon-plus"></span>创建新用户
					</a>
				</div>

				<isperp:grid gridId="cusUserGrid" autowidth="false"
					url="customer/user/searchByKeyword" cusFormatterActions="false"
					autoload="false" rowNum="6" rownumbers="false" showToolbar="false"
					showSearchbar="false" ondbClickRowEvent="gotoIncidentNextStep();">
					<jsp:body>
					<isperp:column name="id" title="ID" hidden="true"></isperp:column>
					<isperp:column name="name" title="用户信息" isFormatterFun="true"
						formatter="return cusUserFormatter(cellvalue, options, rowObject);"
						width="700"></isperp:column>
					<isperp:column name="type" title="type" hidden="true"></isperp:column>
					<isperp:column name="sex" title="sex" hidden="true"></isperp:column>
					<isperp:column name="mobile" title="mobile" hidden="true"></isperp:column>
					<isperp:column name="customer_name" title="customer_name"
						hidden="true"></isperp:column>
					<isperp:column name="department" title="department" hidden="true"></isperp:column>
					<isperp:column name="linkaddress" title="linkaddress" hidden="true"></isperp:column>
					<isperp:column name="projectlist" title="projectlist" hidden="true"></isperp:column>
					<isperp:column name="tel" title="tel" width="60"
						isFormatterFun="true" formatter="return '<a class=\"nui-txt-link\" onclick=\"cusUserGrid.jqGrid.setSelection(\\''+rowObject.id+'\\'); gotoIncidentNextStep();\">选择</a>';"></isperp:column>
					</jsp:body>
				</isperp:grid>
			</div>


		</div>
		<div id="wiz_create">

			<div class="box no-border">
				<div class="header">
					<h3 class="box-title">事件信息</h3>
					<isperp:help id="help2">
						<p>1、请输入事件信息，包括事件标题和事件描述，事件标题为该事件的关键字；</p>
						<p>2、判断当前事件是否属于合同服务范围：</p>
						<p>
							&nbsp;&nbsp;&nbsp;&nbsp;2.1、事件内容是否在服务范围之内。系统根据事件标题自动匹配项目合同关联的服务目录，单击“显示全部”可以查看所有服务目录，若能匹配，请选择并点击“下一步”，否则拒绝提供服务；</p>
						<p>&nbsp;&nbsp;&nbsp;&nbsp;2.2、关联资产是否在合同范围之内。根据客户提供的资产编号，查找该资产是否在服务合同范围之内，系统默认带出该客户的资产；</p>
						<p>3、如果有匹配的服务目录，请选择，并点击“下一步”；如无法匹配，则告知用户不在服务范围，不予受理。</p>
					</isperp:help>
				</div>
				<form id="incidentForm" class="validate"
					action="incident/incident/saveAndStart">
					<input name="id" type="hidden" value="${id }"> <input
						id="cusUserId" name="cusUserId" type="hidden">
					<table class="form-table">
						<tr>
							<td class="td1">选择项目：</td>
							<td class="td2"><select id="incidentProjectId"
								data-width="310px" name="projectId" class="required search"></select>
							</td>
						<tr>
							<td class="td1">事件标题：</td>
							<td class="td2"><input id="incidentTitle" name="title"
								class="required" type="text" maxlength="200" style="width:300px">
							</td>
						</tr>
						<tr>
							<td class="td1">事件描述：</td>
							<td class="td2"><textarea id="incidentDescription"
									 name="description"></textarea>
							</td>
						</tr>
						<tr>
							<td class="td1">附件：</td>
							<td class="td2"><isperp:uploader sourceId="${id }"
									id="incidentFiles"></isperp:uploader>
							</td>
						</tr>
						<tr id="assetTr">
							<td class="td1">关联资产：</td>
							<td class="td2"><input id="assAssetId" name="ciId"
								type="hidden"> <span id="ciIdMsg"></span>
								<div id="selectAssectGridGrid" class="box no-border">
									<div class="normal-header">
										<span class="box-title">请从用户所属资产中选择事件对应的资产，也可从资产库中</span> <a
											class="nui-txt-link" href="javascript:customerCi_Onclick();">选择资产库
										</a>
									</div>
									<isperp:grid gridId="assAssectGrid" autowidth="true"
										showPager="false" rowNum="10" url="" rownumbers="false"
										ondbClickRowEvent="assAssectGridSelected();"
										showSearchbar="false" showToolbar="false"
										cusFormatterActions="false" autoload="false">
										<isperp:column name="id" title="id" hidden="true"></isperp:column>
										<isperp:column name="code" title="编号" width="90"></isperp:column>
										<isperp:column name="name" title="名称" width="100"
											isFormatterFun="true"
											formatter="return formatCiName(rowObject);"></isperp:column>
										<isperp:column name="confCategoryName" title="类别" width="100"></isperp:column>
										<isperp:column name="useStaffName" title="使用者" width="100"></isperp:column>
										<isperp:column name="supportStaffName" title="维护者" width="100"></isperp:column>
										<isperp:column name="managementStaffName" title="管理者"
											width="100"></isperp:column>
										<isperp:column name="status" title="状态" width="60"></isperp:column>
										<isperp:column name="version" title="操作" isFormatterFun="true"
											width="80"
											formatter="return formatSelector(rowObject,'assAssectGrid');"></isperp:column>
									</isperp:grid>
								</div></td>
						</tr>
						<tr id="serviceCategoryTr">
							<td class="td1">关联服务：</td>
							<td class="td2"><input id="serviceCategoryId"
								name="serviceCategoryId" type="hidden"> <span
								id="serviceCategoryMsg"></span>
								<div class="box no-border" id="selectSrcServiceGrid">
									<div class="normal-header">
										<span class="box-title required">请从事件标题自动匹配的服务中选择事件对应的服务，也可从服务目录中</span>
										<a class="nui-txt-link"
											href="javascript:projectServiceCategory_Onclick();">选择服务目录
										</a><span><font color="red">*</font><font color="blue">必选</font>
										</span>
									</div>
									<isperp:grid gridId="srcServiceGrid"
										url="serviceCatalog/service/searchByKeyword" showPager="false"
										rownumbers="false" rowNum="5" cusFormatterActions="false"
										ondbClickRowEvent="srcServiceGridSelected();"
										showSearchbar="false" showToolbar="false" autoload="false">
										<isperp:column name="id" title="ID" hidden="true"></isperp:column>
										<isperp:column name="name" title="名称" width="100"
											isFormatterFun="true"
											formatter="return formatSrcName(rowObject);"></isperp:column>
										<isperp:column name="description" title="描述" width="580px"></isperp:column>
										<isperp:column name="selected" title="操作"
											isFormatterFun="true" width="80"
											formatter="return formatSelector(rowObject,'srcServiceGrid');"></isperp:column>

									</isperp:grid>
								</div></td>
						</tr>
					</table>
				</form>

			</div>

		</div>

		<div id="wiz_similarIncident">

			<div class="box">
				<div class="header">
					<h3 class="box-title">类似事件（备注：默认资产编号、报障人、事件标题从事件库抓出类似事件，按时间倒序）</h3>
				</div>
				<isperp:grid gridTitle="类似事件" gridId="similarIncidentGrid"
					url="incident/incident/searchSimilarIncidents" autowidth="true"
					showToolbar="false" cusFormatterActions="false" width="auto"
					cusViewUrl="incident/incident/view"
					ondbClickRowEvent="similarIncidentGrid.view(rowid);" rowNum="5"
					showSearchbar="false" autoload="false">
					<isperp:column name="id" title="ID" hidden="true"></isperp:column>
					<isperp:column name="code" width="120" title="事件编号"></isperp:column>
					<isperp:column name="title" width="240" title="事件标题"></isperp:column>
					<isperp:column name="description" width="350" title="事件描述"></isperp:column>
				</isperp:grid>
			</div>
		</div>

		<div id="wiz_support">
			<div class="box no-border">
				<div class="header">
					<h3>相关事件解决方案</h3>
				</div>
				<isperp:grid gridId="knowledgeGrid" url="" autowidth="true"
					showToolbar="false" cusFormatterActions="false"
					showSearchbar="false" autoload="false"
					cusViewUrl="knowledge/knowledgeSearch/knowledgeInfoView"
					ondbClickRowEvent="knowledgeGrid.view(rowid);" rowNum="5">
					<isperp:column name="id" title="ID" hidden="true"></isperp:column>
					<isperp:column name="title" width="100" title="标题"></isperp:column>
					<isperp:column name="contents" width="550" title="详细内容"></isperp:column>
				</isperp:grid>
			</div>
			<br>
		</div>
	</div>
	<isperp:wizButtonList buttonListId="wizCreateSetpBtns"
		hiddenFinishButton="true">
		<div class="right finish">
			<button onclick=" submitIncident('1') ">
				<span class="icon icon-arrow-right"></span>初步诊断
			</button>
			<button onclick=" submitIncident('2') ">
				<span class="icon icon-ok"></span>解决完成
			</button>
		</div>
	</isperp:wizButtonList>
</div>
<input type="hidden" id="createCusUserId">
<div id="createCusUserDialog" title="创建用户"
	style="display:none;padding:5px">
	<iframe id="createCusUserIframe" src=""
		style="width:100%;height:100%;;border:none"></iframe>
</div>
<script type="text/javascript">
	function formatSelector(rowObject, gridId) {
		return "<a class=\"nui-txt-link\" onclick=\"" + gridId + ".jqGrid.setSelection('" + rowObject.id + "');" + gridId + "Selected();\">选择</a>";
	}

	function formatSrcName(rowObject) {
		return "<a href=\"javascript:isperp.openDialog({contentUrl:'serviceCatalog/service/view?id=" + rowObject.id + "'});\">" + rowObject.name + "</a>";
	}

	function formatCiName(rowObject) {
		return "<a href=\"javascript:isperp.openDialog({contentUrl:'configuration/ci/ciResumeView?id=" + rowObject.id + "'});\">" + rowObject.name + "</a>";
	}

	var srcServiceGridSelected = function(id, name) {

		if (!id && !name) {
			var selectedRow = srcServiceGrid.getRowData();
			id = selectedRow.id;
			name = selectedRow.name;
		}

		if (id && name) {

			var msg = name + "  <a class='nui-txt-link' href='javascript:void(0)' style='padding-left:5px' onclick='reselectService();'>[修改]</a>";

			$("#selectSrcServiceGrid").hide();
			$("#serviceCategoryId").val(id);
			$("#serviceCategoryMsg").html(msg);
			$("#icdIncidentServiceCatalog").html(name);
		}
	};

	var reselectService = function() {
		$("#selectSrcServiceGrid").show();
		$("#serviceCategoryMsg").html("");
		$("#serviceCategoryId").val("");
		$("#icdIncidentServiceCatalog").html("");
	};

	var assAssectGridSelected = function(id, name) {
		if (!id && !name) {
			var selectedRow = assAssectGrid.getRowData();
			id = selectedRow.id;
			name = selectedRow.name;
		}
		if (id && name) {
			var msg = name + "  <a class='nui-txt-link' href='javascript:void(0)' style='padding-left:5px' onclick='reselectAsset();'>[修改]</a>";

			$("#selectAssectGridGrid").hide();
			$("#assAssetId").val(id);
			$("#ciIdMsg").html(msg);
			$("#icdIncidentAssets").html(name);
		}
	};

	var reselectAsset = function() {

		$("#selectAssectGridGrid").show();
		$("#ciIdMsg").html("");
		$("#assAssetId").val("");
		$("#icdIncidentAssets").html("");

	};
	
	function setServiceCatalogValue(id, name) {

		srcServiceGridSelected(id, name);
		$("#projectServiceDialog").wijdialog("close");
	}

	function setCustomerCiValue(id, name) {
		assAssectGridSelected(id, name);
		$("#customerCiDiglog").wijdialog("close");
	}
	
	

	function projectServiceCategory_Onclick() {
		isperp.openDialog({	
			id : "projectServiceDialog", 
			onThisWindow : true,
			title : "选择服务目录",
			windowSize : "normal",
			contentUrl : "serviceCatalog/service/selectEdit?projectId=" + $("#incidentProjectId").val(),
			buttons : [ {
				text : "确定",
				"class" : "nui-mainbtn",
				click : function() {
					var $me = $(this);
					$me.find("iframe")[0].contentWindow.getSelectRow();
				}
			}, {
				text : "关闭",
				"class" : 'grey',
				click : function() {
					$(this).wijdialog("close");
				}
			} ]
		});

	}

	function customerCi_Onclick() {
		isperp.openDialog({
			id : "customerCiDiglog", 
			onThisWindow : true,
			title : "选择关联资产",
			windowSize : "normal",
			contentUrl : "customer/customer/customerCiEdit?customerId=" + $("#hidCusUserCustomerId").val(),
			buttons : [ {
				text : "确定",
				"class" : "nui-mainbtn",
				click : function() {
					var $me = $(this);
					$me.find("iframe")[0].contentWindow.getSelectRow();
				}
			}, {
				text : "关闭",
				"class" : 'grey',
				click : function() {
					$(this).wijdialog("close");
				}
			} ]
		});

	}

	function cusUserFormatter(cellvalue, options, rowObject) {
		var cType="",cGender="",cTel="",cDepartment="",cLinkaddress="";
		
		if (rowObject.type == "VIP") {
			cType = " <span style='color:red'>VIP</span> ";
		} else {
			cType = " " + rowObject.type + " ";
		}
		
		if (rowObject.sex == "男") {
			cGender = "<img src='img/icons/male.png' />";
		} else if(rowObject.sex == "女"){
			cGender = "<img src='img/icons/female.png' />";
		}
		
		if (rowObject.department) {
			cDepartment = " "+ rowObject.department;
		}
		
		if (rowObject.linkaddress) {
			cLinkaddress =" "+ rowObject.linkaddress;
		}
		
		if (rowObject.tel) {
			cTel = " "+ rowObject.tel;
		}

		if (rowObject.tel && rowObject.mobile) {
			cTel += "/" + rowObject.mobile;
		}
		
		return "<div>" + cGender + "<span  style='color:#ffc60-;font-weight:700;font-size:14px'>" + cellvalue + "</span> " + cType + cTel +cDepartment+cLinkaddress+ " " + rowObject.customer_name + "</div><div>关联项目：" + rowObject.projectlist + "</div>";
	}
</script>

<script type="text/javascript">
	var $wizCreate = isperp.wizard({
		wizardId : "createWizard",
		validataStep : true
	});

	function openCreateCusUser() {
		var $wizCreateSetpBtns = $("#wizCreateSetpBtns");

		$("#createCusUserIframe").attr("src", "customer/user/createUserEdit");
		$("#createCusUserDialog").dialog({
			modal : true,
			autoOpen : true,
			width : 500,
			height : 500,
			open : function(event, ui) {
				$("#createCusUserId").val("");
				$wizCreateSetpBtns.hide();
			},
			close : function() {
				$wizCreateSetpBtns.show();
			},
			buttons : {
				保存并进入下一步 : function() {
					var $me = $(this); 
					isperp.getWindow("createCusUserIframe").sumbitCusUserForm(function(id) {

						$me.dialog("close");
						$("#createCusUserId").val(id);
						$("#lbCusUserId").html(id);
						gotoIncidentNextStep();

					});

				}

			}
		});

	}

	function submitIncident(status) {
		if ($("#serviceCategoryId").val() == "") {
			isperp.alert("请选择服务目录！");
			return false;
		}
		isperp.showLoading({onThisWindow:true});
	    var res=	isperp.submitForm({
			formId : "incidentForm",
			data : {
				"type" : status
			},
			success : function(responseText) {
				self.location = responseText.data + "?id=${id}";
			}
		});
	    if(res){
	    	isperp.hideLoading({onThisWindow:true});
	    }
	}

	$("#incidentTitle").change(function() {
		var title = $(this).val();
		var projectId = $("#incidentProjectId").val();

		if (title && projectId && title != "" && projectId != "") {
			var condition = [ {
				"field" : "keyword",
				"op" : "cn",
				"data" : title
			}, {
				"field" : "projectId",
				"op" : "eq",
				"data" : projectId
			} ];
			srcServiceGrid.search(condition);
		} else {
			srcServiceGrid.jqGrid.jqGrid("clearGridData");
		}
	});

	$("#searchUserKeyword").keyup(function() {
		if (event.keyCode == 13) {
			searchUserKeyword_submit();
		}
	});

	function searchUserKeyword_submit() {

		cusUserGrid.search({
			field : "keyword",
			op : "cn",
			data : document.getElementById("searchUserKeyword").value
		});
	}

	var createWizard_Event0 = function(index, obj) {

		$("#cusUserInfo").hide();
		$("#incidentInfo").hide();
	};

	var createWizard_Event1 = function(index, obj) {
		var uId = $("#lbCusUserId").html();
		var uIdSel = cusUserGrid.selrow();
		if (uId == undefined || uId == "" || (uIdSel && uId && uId != uIdSel)) {
			uId = uIdSel;
		}
		if (uId) {

			$("#cusUserInfo").show();
			//获取实体并且设置实体的值
			$("#incidentInfo").hide();
			setCusUser(uId);
		} else {
			isperp.alert("请选择客户！");
			return false;
		}

	};

	var createWizard_Event2 = function(index, obj) {

		var uId = $("#lbCusUserId").html();

		if (uId == undefined || uId == "") {
			isperp.alert("请选择客户！");
			return false;
		}

		if ($("#serviceCategoryId").val() == "") {
			isperp.alert("请选择服务目录！");
			return false;
		}

		var result = $("#incidentForm").valid();

		if (!result) {
			return false;
		}

		$("#cusUserInfo").show();
		$("#incidentInfo").show();

		setIncident();
		
		isperp.submitForm({
			formId : "incidentForm",
			url:"incident/incident/save",
			success:function(){
				isperp.tooltip("事件保存成功！");
			}
		});


		var title = $("#incidentTitle").val();
		var ciId = $("#assAssetId").val();
		var userId = $("#lbCusUserName").html();
		//查询类似事件
		if (title) {
			var condition = [ {
				"field" : "title",
				"op" : "cn",
				"data" : title
			}, {
				"field" : "ciId",
				"op" : "cn",
				"data" : ciId
			}, {
				"field" : "userId",
				"op" : "cn",
				"data" : userId
			} ];
			similarIncidentGrid.search(condition);
		}
	};

	var createWizard_Event3 = function(index, obj) {
		var uId = $("#lbCusUserId").html();

		if (uId == undefined || uId == "") {
			isperp.alert("请选择用户！");
			return false;
		}

		if ($("#serviceCategoryId").val() == "") {
			isperp.alert("请选择服务目录！");
			return false;
		}

		knowledgeGrid.jqGrid.setGridParam({
			url : "knowledge/knowledgeSearch/searchByKeyword?keyword=" + $("#incidentTitle").val()
		});

		knowledgeGrid.search();
	};

	var setCusUser = function(userId) {
		$("#cusUserId").val(userId);

		$.getJSON("customer/user/getDetail?id=" + userId, function(data) {

			if (data) {
				$("#lbCusUserId").html(data.id);

				$("#lbCusUserName").html(data.name);
				$("#lbCusUserTel").html(data.tel);
				$("#lbCusUserCustomer").html(data.customer_name);
				$("#hidCusUserCustomerId").val(data.customer_id);

				$("#lbCusUserType").html(data.type);
				$("#lbCusUserEmail").html(data.email);
				$("#lbCusUserDepartment").html(data.department);
				$("#lbCusUserLinkaddress").html(data.linkaddress);
			}
		});

		$.getJSON("customer/user/listProjects?userId=" + userId, function(data) {

			$("#incidentProjectId").empty();
			if (data[0]) {
				$(data).each(function(index, item) {
					$("#incidentProjectId").append('<option value="'+item.id+'">' + item.name + '</option>');
				});
			}

			$("#incidentProjectId").trigger("chosen:updated");
		});

		assAssectGrid.jqGrid.setGridParam({
			url : "configuration/ci/listByCusUserId?cusUserId=" + userId
		});

		assAssectGrid.search();

	};

	var setIncident = function() {

		$("#icdIncidentTitle").html($("#incidentTitle").val());
		$("#icdIncidentDescription").html($("#incidentDescription").val());
		$("#icdIncidentProject").html($("#incidentProjectId").text());

	};

	function gotoIncidentNextStep() {
		//$wizCreate.gotoNextIndex();
		$("#wizCreateSetpBtns .btn-next").click();
	}
</script>